<template>
  <view class="dw-user">
    <view class="dw-user-infos">
      <image class="dw-user-infos-avatar" src="../../static/avatar.jpg"></image>
      <view class="dw-user-infos-body">
        <view class="dw-user-infos-nickname">大王模板</view>
        <view class="dw-user-infos-title">ID: dw123456</view>
      </view>
      <view class="dw-user-infos-extra">
        <dw-icon class="ml5" size="40rpx" name="qrcode" color="#999"></dw-icon>
        <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
      </view>
    </view>

    <view class="dw-user-section">
      <view class="dw-user-list">
        <view class="dw-user-list-item">
          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="insurance" color="#51BE63"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">服务</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="dw-user-section">
      <view class="dw-user-list">
        <view class="dw-user-list-item">

          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="paizhao" color="#777"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">拍摄</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
        <view class="dw-user-list-item">

          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="creditcard" color="#E7C267"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">卡包</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
        <view class="dw-user-list-item">

          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="shop" color="#E2A058"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">商城</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
        <view class="dw-user-list-item">
          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="fire" color="#D06964"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">热门</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
        <view class="dw-user-list-item">
          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="team" color="#51BE63"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">朋友们</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="dw-user-section">
      <view class="dw-user-list">
        <view class="dw-user-list-item">
          <view class="dw-user-list-item-icon">
            <dw-icon size="48rpx" name="setting" color="#3185f2"></dw-icon>
          </view>
          <view class="dw-user-list-item-content">设置</view>
          <view class="dw-user-list-item-extra">
            <dw-icon class="ml8" size="24rpx" name="right" color="#999"></dw-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
</script>
<style lang="scss">
@import url('../../static/dw-comm.css');
@import url('../../static/dw-user.css');

.dw-user {
  padding: 0;
  background: #efefef;

  &>view {
    margin-bottom: 16rpx;
  }

  &-infos {
    align-items: flex-start;
    background: #FFF;
    padding: 64rpx 32rpx 48rpx;

    &-avatar {
      border-radius: 12rpx;
    }

    &-nickname {
      padding-top: 8rpx;
    }

    &-title {
      padding: 0;
      background: transparent;
      margin-top: 12rpx;
    }

    &-extra {
      align-self: center;
      display: flex;
      align-items: center;
    }
  }

  &-section {
    padding: 0 32rpx;
  }

  &-list {
    &-item {
      position: relative;
    }

    &-item+&-item {
      border: none;

      &::before {
        position: absolute;
        content: ' ';
        top: 0;
        height: 1rpx;
        width: 100%;
        background: #e5e5e5;
        left: 64rpx;
      }
    }
  }
}
</style>
